@use "sass:math";
@function he-to-rgb($hex) {
    @return rgba($hex, 0.2);
}

//rgba($color: #000000, $alpha: 1.0);
// $color: he-to-rgb('#ff5733');
//混入样式
// $themes:( light:( color:red), dark:( color:#0A6CFF, ));
// @mixin themes {
//     @each $themes-key,
//     $themes-map in $themes {
//         $themes-map: $themes-map !global;
//         [data-theme=#{$themes-key}] & {
//             @content;
//         }
//     }
// }
// // 获取对应的主题数据
// @function t($key) {
//     @return map-get($themes-map, $key)
// }
@for $i from 0 through 50 {
    .padding-#{$i} {
        padding: $i+px;
    }
    .padding-right-#{$i} {
        padding-right: $i+px;
    }
    .padding-top-bottom-#{$i} {
        padding-top: $i+px;
        padding-bottom: $i+px;
    }
    .padding-left-right-#{$i} {
        padding-left: $i+px;
        padding-right: $i+px;
    }
}


/* 字体大小 */

@for $i from 10 through 30 {
    .font-size-#{$i} {
        font-size: $i+'px';
    }
}


/* flex 布局 */

$justify: left,
center,
right,
flex-start,
space-between;
@each $item in $justify {
    .flex-#{$item} {
        display: flex;
        justify-content: $item;
        align-items: center;
    }
}


/* position布局 */

$positions: fixed,
relative,
absolute;
@each $position in $positions {
    .position-#{$position} {
        position: $position;
    }
}

@for $i from 10 through 30 {
    .gap-#{$i} {
        gap: $i+px;
    }
}


/* 透明度 */

@for $i from 1 through 10 {
    $opacity: calc($i / 10);
    .opacity-#{$i} {
        opacity: $opacity;
    }
}